<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>商品异常</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/echarts.js"></script>
	<script src="js/jquery.js"></script>
</head>
<body>
<div class="container-fluid">
	<%@include file="header.jsp"%>

	<br><br>
	<form class="form-horizontal" action="goodInfoErrorList" method="post" enctype="multipart/form-data">
		<input type="hidden" name="id"  value="${good.id}"/>
		<input type="hidden" id="goodName" value="${good.name}"/>
		<input type="hidden" id="goodTrend" value="${goodTrend}"/>
		<div id="main" style="width: 80%;height:500px;"></div>
		<br><br>
		<div class="form-group">
			<div class="col-sm-offset-1 col-sm-10">
				<button type="submit" class="btn btn-success">返回</button>
			</div>
		</div>
	</form>
</div>
</body>
</html>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    //获取前端转过来的Json集合数据组
     var goodName = $("#goodName").val();

    var goodTrend = $("#goodTrend").val();
    var trends=eval(${unpayed});
   // alert(eval(${goodTrend}))
    var month =[];
    var total=[];
    var maxMonth=trends[trends.length-1].month;
    for (let i = 0; i < trends.length; i++) {
		console.log(trends[i].month)
		month.push(trends[i].month)


		total.push(trends[i].total)
    }
    // for (let i = 0; i <goodTrend.length ; i++) {
    //    // alert(goodTrend[i])
    //     // alert(goodTrend[i].month)
    //     // month.push(goodTrend[i].month);
    //     // total.push(goodTrend[i].total)
    // }
    // var order_counts = $("#orderCounts").val();
    // var years = $("#years").val();
    // var yearValues = $("#yearValues").val();
    // var quarters = $("#quarters").val();
    // var quarterValues = $("#quarterValues").val();
    // var months = $("#months").val();
    // var monthValues = $("#monthValues").val();
    //
    // var aaa = order_ids.split(",")
    // var bbb = order_counts.split(",")
    // 指定图表的配置项和数据
    // var option = {
    //     title:{
    //         text:goodName,
    //         subtext:'销售趋势图',
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: ['一月', '二月', '三月', '四月', '五月', '六月']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [920, 801, 964, 1390, 1530, 1620],
    //         type: 'line'
    //     }],
    //     // An highlighted block
    //     tooltip : {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //             label: {
    //                 backgroundColor: '#6a7985'
    //             }
    //         }
    //     }
    // };
    var option = {
        // title: {
        //   show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
        //   text: this.title, //主标题文本，'\n'指定换行
        //   x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        //   y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        //   textStyle: {
        //     //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        //     fontSize: 14,
        //     color: "#fff",
        //   },
        // },
        title:{
            text:goodName,
            subtext:'当年未支付异常图',
        },
        backgroundColor: '#47A3CF',
        grid: {
            left: "5%",
            right: "5%",
            bottom: "10%",
        },
        tooltip: {
            trigger: "axis",
            //   formatter: function (param) {
            //     //   console.log(param)
            //     if(param[0].dataIndex==0){
            //         console.log(1)
            //     }
            //   },
        },
        xAxis: {
            data:month,
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
            },
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
            },
        },
        // visualMap: {
        //     top: "top",
        //     left: "center",
        //     orient: "horizontal",
        //     textStyle: {
        //         color: "#fff",
        //     },
        //     // dimension: 0,
        //     // pieces: [
        //     //     {
        //     //         gt: 0,
        //     //         lte: maxMonth-2,
        //     //         color: "cyan",
        //     //         label: "真实值",
        //     //     },
        //     //
        //     //     {
        //     //         gt: maxMonth-2,
        //     //         color: "purple",
        //     //         label: "预测值",
        //     //     },
        //     // ],
        //     // outOfRange: {
        //     //     color: "#000",
        //     // },
        // },
        series: {
            name: "lineAQI",
            type: "line",
            data:total,
        },
    };
    // var option = {
    //     title:{
    //         text:goodName,
    //         subtext:'当年未支付异常图',
    //     },
    //     backgroundColor: '#47A3CF',
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //         }
    //     },
    //     legend: {
    //         data: ['Direct', 'Search Engine']
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         containLabel: true
    //     },
    //     toolbox: {
    //         feature: {
    //             saveAsImage: {}
    //         }
    //     },
    //     xAxis: {
    //         type: 'category',
    //         boundaryGap: false,
    //         data: month,
    //         axisTick: { //y轴刻度线
    //             show: false
    //         },
    //         //x轴数字颜色
    //         axisLine: {
    //             lineStyle: {
    //                 color: '#c1c1c1',
    //                 width: 1, //这里是为了突出显示加上的
    //             }
    //         },
    //     },
    //     yAxis: {
    //         type: 'value',
    //         //多条横线轴颜色
    //         splitLine: {
    //             show: true,
    //             lineStyle: {
    //                 color: ['#315070'],
    //                 width: 1,
    //                 type: 'solid'
    //             }
    //         },
    //
    //
    //         axisLine: {
    //             lineStyle: {
    //                 color: '#c1c1c1',
    //                 width: 1, //这里是为了突出显示加上的
    //             }
    //         },
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '10%',
    //         top: '10%',
    //         containLabel: true
    //     },
    //     series: [{
    //         name: '注册用户',
    //         type: 'line',
    //         stack: 'Total',
    //         //折点处提示数值
    //         label: {
    //             show: true,
    //             position: 'buttom',
    //             textStyle: {
    //                 color: "#f85336",
    //                 fontSize: 12
    //             }
    //         },
    //         symbolSize: 2, //折点大小
    //         data: total,
    //
    //         itemStyle: {
    //             normal: {
    //                 color: '#c23531', //折点颜色
    //                 lineStyle: {
    //                     color: '#c23531' //折线颜色
    //                 }
    //             }
    //         },
    //         //线下阴影
    //         areaStyle: {
    //             normal: {
    //                 color: {
    //                     x: 0,
    //                     y: 0,
    //                     x2: 0,
    //                     y2: 1,
    //                     colorStops: [{
    //                         offset: 0,
    //                         color: "#072948" // 0% 处的颜色
    //                     }, {
    //                         offset: 0.7,
    //                         color: "#072948" // 100% 处的颜色
    //                     }],
    //                     globalCoord: false // 缺省为 false
    //                 }
    //             }
    //         },
    //
    //     },
    //         {
    //             name: '活跃用户',
    //             type: 'line',
    //             //折点处提示数值
    //             label: {
    //                 show: true,
    //                 position: 'buttom',
    //                 textStyle: {
    //                     color: "#fff",
    //                     fontSize: 12
    //                 }
    //             },
    //             stack: 'Total',
    //             symbolSize: 2, //折点大小
    //             //折点处提示数值
    //
    //             data: [100, 220, 180, 210, 120, 120],
    //             itemStyle: {
    //                 normal: {
    //                     color: '#e5e5e5', //折点颜色
    //                     lineStyle: {
    //                         color: '#fff' //折线颜色
    //                     }
    //                 }
    //             },
    //             //线下阴影
    //             areaStyle: {
    //                 normal: {
    //                     color: {
    //                         x: 0,
    //                         y: 0,
    //                         x2: 0,
    //                         y2: 1,
    //                         colorStops: [{
    //                             offset: 0,
    //                             color: "#689f9d" // 0% 处的颜色
    //                         }, {
    //                             offset: 0.7,
    //                             color: "#689f9d" // 100% 处的颜色
    //                         }],
    //                         globalCoord: false // 缺省为 false
    //                     }
    //                 }
    //             },
    //         }
    //     ]
    // }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;
    // 基于准备好的dom，初始化echarts实例
   // var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    // var option = {
    //     title:{
    //         text:'树懒课堂研发费用折线图',
    //         subtext:'数据纯属虚构',
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: ['一月', '二月', '三月', '四月', '五月', '六月']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [920, 801, 964, 1390, 1530, 1620],
    //         type: 'line'
    //     }]
    // };
    // 使用刚指定的配置项和数据显示图表。
   // myChart.setOption(option);
</script>